<template>
    <div class="register-container">
        <div class="register-card">
            <div class="register-title">管理员注册</div>
            <!-- 注册表单 -->
            <el-form
                    status-icon
                    :model="registerForm"
                    :rules="rules"
                    ref="ruleForm"
                    class="register-form"
            >
                <!-- 用户名输入框 -->
                <el-form-item prop="username">
                    <el-input
                            v-model="registerForm.username"
                            prefix-icon="el-icon-user-solid"
                            placeholder="用户名"
                            @keyup.enter="register"
                    />
                </el-form-item>
                <!-- 验证码 -->
                <el-form-item prop="code">
                    <el-input
                            maxlength="6"
                            v-model="code"
                            label="验证码"
                            placeholder="请输入6位验证码"
                            @keyup.enter="register"
                            style="width: 280px">
                    </el-input>
                    <v-btn class="send-code-btn" style="color: white" text small :disabled="flag" @click="sendCode">
                        {{ registerForm.codeMsg }}
                    </v-btn>
                </el-form-item>
                <!-- 密码输入框 -->
                <el-form-item prop="password">
                    <el-input
                            v-model="registerForm.password"
                            prefix-icon="iconfont el-icon-mymima"
                            show-password
                            placeholder="密码"
                            @keyup.enter="register"
                    />
                </el-form-item>
                <!-- 确认密码输入框 -->
                <el-form-item prop="confirmPassword">
                    <el-input
                            v-model="registerForm.confirmPassword"
                            prefix-icon="iconfont el-icon-mymima"
                            show-password
                            placeholder="确认密码"
                    />
                </el-form-item>
            </el-form>
            <!-- 注册按钮 -->
            <el-button type="primary" @click="register">注册</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                registerForm: {
                    username: "",
                    code:"",
                    password: "",
                    confirmPassword: "",
                    codeMsg: "发送",
                    time: 60
                },
                rules: {
                    username: [
                        { required: true, message: "用户名不能为空", trigger: "blur" }
                    ],
                    password: [
                        { required: true, message: "密码不能为空", trigger: "blur" },
                        { min: 6, max: 16, message: "密码长度为6-16位", trigger: "blur" }
                    ],
                    confirmPassword: [
                        { required: true, message: "请再次输入密码", trigger: "blur" },
                        {
                            validator: (rule, value, callback) => {
                                if (value !== this.registerForm.password) {
                                    callback(new Error("两次输入密码不一致"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        methods: {
            sendCode() {
                const that = this;
                // eslint-disable-next-line no-undef
                var captcha = new TencentCaptcha(this.config.TENCENT_CAPTCHA, function(
                    res
                ) {
                    if (res.ret === 0) {
                        //发送邮件
                        that.countDown();
                        that.axios
                            .get("/api/users/code", {
                                params: { username: that.username }
                            })
                            .then(({ data }) => {
                                if (data.flag) {
                                    that.$toast({ type: "success", message: "发送成功" });
                                } else {
                                    that.$toast({ type: "error", message: data.message });
                                }
                            });
                    }
                });
                // 显示验证码
                captcha.show();
            },
            countDown() {
                //this.flag = true;
                this.timer = setInterval(() => {
                    this.time--;
                    this.codeMsg = this.time + "s";
                    if (this.time <= 0) {
                        clearInterval(this.timer);
                        this.codeMsg = "发送";
                        this.time = 60;
                        //this.flag = false;
                    }
                }, 1000);
            },
            register() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        //发送注册请求
                        let param = new URLSearchParams();
                        param.append("username", this.registerForm.username);
                        param.append("password", this.registerForm.password);
                        param.append("code", this.registerForm.code);
                        //"/api/register?username="+username+"&password="+password
                        this.axios.post("/api/register", param).then(({ data }) => {
                            if (data.flag) {
                                this.$message.success("注册成功，请登录");
                                this.$router.push({ path: "/login" });
                            } else {
                                this.$message.error(data.message || "注册失败");
                            }
                        });
                    } else {
                        return false;
                    }
                });
            }
        }
    };
</script>

<style scoped>
    .register-container {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: url(http://10.205.1.62:83/photos/e870e45cbb2e007061405d5b2e5bfd59.jpg) center center /
    cover no-repeat;
    }
    .register-card {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;

        padding: 170px 60px 180px;
        width: 350px;
    }
    .register-title {
        color: #303133;
        font-weight: bold;
        font-size: 1rem;
    }
    .register-form {
        margin-top: 1.2rem;
    }
    .register-card button {
        margin-top: 1rem;
        width: 100%;
    }
    .send-code-btn {
        position: absolute;
        right: 20px;
    }
</style>